<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化</title>
</head>
<body>
    <!-- 组件可以很简单，也可以很复杂 -->
    <div id="app">
        <!-- 使用组件，组件复用 -->
        <!-- 组件之间是相互独立的，自己有自己的数据，不会相互影响 -->
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>

        <h2>注意事项：</h2>
        <p>组件中的data必须是函数，而不能是对象</p>
        <p>组件模板内容必须是单个根元素,不能两个并列</p>
        <p>组件命名：如果在定义的时候是驼峰式命名，那么使用的时候要通过短横线的方式使用，如：“my-button”</p>
        <p>当然也有特例：在新的组件中的template的模板字符串中，还是可以用驼峰式的。比如新组建引用了旧组件（驼峰式命名），那在使用的时候也是驼峰</p>
    </div>


    <script src="./Vue.js"></script>
    <script>
        // 注册全局组件
        // 组件其实就是一个单独的Vue实例。所有东西都能用，data，methods。等等
        Vue.component('myButton',{
            template:`<button @click="increase">我的按钮{{num}}</button>`,
            // 组件的data必须是函数，不能是对象了
            data(){
                return{
                    num:0
                }
            },
            methods:{
                increase(){
                    this.num ++;
                }
            }
        })
        //模板字符串中可以使用驼峰方式使用组件
        Vue.component('muButton2',{
            template:`<myButton></myButton>`
        })
        const vm = new Vue({
            el:'#app',
            // 定义局部组件
            components:{
                'my-sub-comp':{
                    template:`<div>123</div>`
                }
            }
        })
    </script>
</body>
</html>